class PageClass {                               //定义一个分页器类      
    constructor( ele , pageNum , page , cb ){   //需要传入4个参数，第一个容器元素，第二个页面总数，第三个当前页面数，第四个为回调函数
        this.ele = ele ;            //定义属性
        this.pageNum = pageNum ; 
        this.page = page ; 
        this.cb = cb ; 
        this.renderPage() ;     //执行渲染的方法
        this.operate();         //给实例化对象绑定各种操作的方法
    }
    renderPage(){                   //在类的原型上定义一个渲染的方法
        let str = '' ;
        if( this.pageNum > 5 ){     //判断当前分页的页面总数是否超过5页
            if( this.page  <= 4 ){         //如果页面总数大于5  ，再判断当前页是否小于或者等于第四页
                for( let i = 0 ; i < 5 ; i ++ ){        //如果当前页是小于等于4以内的页数 ，遍历1到5
                    if( (i+1) == this.page ){       //判断当前页是否等于 当前   索引值（索引值从0开始） +  1
                        str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//等于的话说明渲染的是当前页，给当前页一个active的类名进行渲染
                    } else {  //如果渲染的不是当前页
                        str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//普通渲染就行了
                    }
                } 
                str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;//最后渲染一个最末尾页
            } else if (  this.page  > 4 && this.page < this.pageNum - 3  ){   //判断当前页是否大于第四页，且小于最大页数减去 3 
                str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; //渲染一个首页
                for( let i = this.page - 3 ; i < this.page + 2 ; i ++ ){
                    if( (i+1) == this.page ){ //判断当前正在渲染的是否为当前页
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//如果是当前页，给一个active类名进行渲染
                        } else {
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//如果不是，普通渲染就行
                        }
                    } 
                str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;//渲染一个尾页
            } else if ( this.page >= this.pageNum - 3){//如果当前页数大于或者等于最大页数 - 3 
                str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; //渲染一个首页
                for( let i = this.pageNum - 5 ; i < this.pageNum ; i ++ ){//从倒数第5页开始渲染
                    if( (i+1) == this.page ){   //如果渲染的是当前页
                        str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//增加一个active类名，进行渲染
                    } else {
                        str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//否则普通渲染
                    }
                } 
            }
        } else {        //如果最大页数小于等于5
            for( let i = 0 ; i < this.pageNum ; i ++ ){     //直接渲染到当前最大页数
                if( (i+1) == this.page ){           //判断渲染的是否为当前页数
                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;//如果是增加一个active类名，进行渲染
                } else {
                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;//否则普通渲染就行了
                }
            }
        }
        //将所有内容渲染到容器盒子里
        //第一页
        //上一页
        //中间页面
        //下一页
        //最后一页
        this.ele.innerHTML = `
        <span class="first pageOpt"><a href="javascript:;"><img src="../../images/pageImages/first.png"></a></span>
        <span class="prev pageOpt"><a href="javascript:;"><img src="../../images/pageImages/prev.png"></a></span>
        ${str}
        <span class="next pageOpt"><a href="javascript:;"><img src="../../images/pageImages/next.png"></a></span>
        <span class="last pageOpt"><a href="javascript:;"><img src="../../images/pageImages/last.png"></a></span>` ;
    }
    operate(){                  //在类原型上定义一个operate的方法，给这个类绑定点击事件
        const _that = this ;        //申明一个常量接收this
        let firstEle = this.ele.querySelector(".first");    //获取第一页的元素
        let lastEle = this.ele.querySelector(".last");      //获取最后一页的元素
        let nextEle = this.ele.querySelector(".next");      //获取下一页的元素
        let prevEle = this.ele.querySelector(".prev");      //获取上一页的元素
        let pageStyleEles = this.ele.querySelectorAll(".pageStyle");    //获取所有的中间页面的元素
        firstEle.onclick = function (){     //当点击第一页时
            _that.page = 1 ;                //让page属性重新赋值为1
            _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
        }
        lastEle.onclick = function (){      //当点击最后一页时
            _that.page = _that.pageNum ;    //让page属性重新赋值为页面最大值
            _that.cb( _that.page);          //并将page属性通过回调函数cb传递出去
        }
        nextEle.onclick = function (){      //当点击下一页时
            if( _that.page < _that.pageNum ){   //先判断当前页是否小于最大页
                _that.page = _that.page + 1 ;   //如果没有超过，给page属性自增1
                _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
            }
        }
        prevEle.onclick = function (){      //当点击上一页时
            if( _that.page > 1 ){           //先判断当前页是否大于第一页
                _that.page = _that.page - 1 ;   //如果是大于第一页的话，page属性自减1
                _that.cb(_that.page);           //并将page属性通过回调函数cb传递出去
            }
        }
        pageStyleEles.forEach(function(pageStyleEle){       //遍历获取到中间页面的所有元素
            pageStyleEle.onclick = function (){                //当点击其中一页时
                _that.page = parseInt(this.getAttribute("myPage")); //获取这个元素自定义属性，myPage，属性值是当前页 ，并将当前页赋值给page属性
                _that.cb(_that.page);                           //将page属性通过回调函数cb传递出去
            }
        });
    }
}